<!--
*@Author: QWP
*@Description: 撤回消息显示
*@Date: 2025-01-16 15:45:17
-->
<template>
  <div class="f-flex-column f-w-100" style="align-items: center;">
    <span class="u-user-time">{{ data.createtime }}</span>
    <div justify="center">
      <span>{{ data.messageInfo }}</span>
      <template v-if="data.crateUserId == userInfo['userId'] && 
        recallMsgs[data.keyid] != undefined &&
        data.messageType == 1">
        <span class="f-padding-l4" style="color: #1890ff; cursor: pointer;"
          @click="toReEdit(data.keyid)">重新编辑</span>
      </template>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useLoginStore, useChatStore } from '@/store'
import { storeToRefs } from 'pinia'

const props = defineProps<{
  data: object,
}>()

const { userInfo } = storeToRefs(useLoginStore())
const chatStore = useChatStore()
const { recallMsgs } = storeToRefs(chatStore)

const emits = defineEmits(['click'])

// 重新编辑
const toReEdit = (keyid: string) => {
  const recallInfo = recallMsgs.value[keyid]
  emits('click', recallInfo['messageInfo'])
}

</script>

<style lang='scss' scoped>
</style>